<template>
<div>
  <div>地址：{{ place }}</div>
  <div>地址1：{{ place1 }}</div>
  <div>橙子:{{ orange1 }}
  </div>
  <button @click="changeLocation">修改location</button>
  <button @click="changeD">修改d</button>
  <button @click="changeAa">修改place1中的aa</button>
  <button @click="changeOrange">修改orange1</button>
</div>
</template>

<script lang='ts' setup name='App'>
import {ref, reactive,toRaw,markRaw} from "vue"
// 数据
// markRaw让被包裹的数据永远不能是响应式
let orange=markRaw({color:"橙色",feel:"中"})
//将橙子变成响应式
let orange1=reactive(orange)
console.log("orange",orange);
console.log("orange1",orange1.feel);


//toRaw(只能用于reactive定义的对象)使game去除响应式，回到原始状态，且game1不能再被修改
let place=reactive({
  location:"南京",
  area:{
    aa:"溧水区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }
})
let place1=toRaw(place)
console.log("响应式数据",place);
console.log("原始数据",place1);
// 方法
function changeLocation(){
  place.location="栖霞区"
}
function changeD(){
  place.area.b.d="江苏第二师范"
}
function changeAa(){
  place1.area.aa="aa"
}
function changeOrange(){
  orange1.feel="良"
  console.log("@@@@",orange1.feel);
  
}
</script>

<style scoped>

</style>